<template>
	<view class="userinfo">

		<!-- #ifdef H5 -->
		<view class="np-user-box">
			<view class="np-portrait-box" @tap="uploadImage">
				<image class="np-portrait" :src="headImg"></image>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="np-user-box">
			<np-avatar canRotate="false" selWidth="200px" selHeight="400upx" @upload="handleUploadFile" :avatarSrc="headImg"
			 avatarStyle="width: 200upx; height: 200upx; border-radius: 100%; border: 6upx solid #fff;"></np-avatar>
			<!-- #ifdef MP-WEIXIN -->
			<text @click="getInfo">获取微信头像</text>
			<!-- #endif -->
		</view>
		<!-- #endif -->
		<input v-model="user.nickname" maxlength="15" class="np-input-box" type="text" placeholder="请输入新昵称" />
		<input v-model="user.qq" class="np-input-box" type="text" placeholder="请输入您的QQ" />
		<input v-model="user.email" class="np-input-box" type="text" placeholder="请输入您的邮箱" />
		<view class="np-input-item">
			<text class="np-tit">性　别：</text>
			<radio-group @change="handleGenderChange">
				<label class="np-gender-item" v-for="(item, index) in genders" :key="index">
					<radio class="gender-item-radio" color="#fa436a" :value="item.value" :checked="item.value == user.gender ? true : false" />
					<text class="gender-item-text">{{ item.name }}</text>
				</label>
			</radio-group>
		</view>

		<view @click="set" class="np-btn">确定</view>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		mixins: [base],
		data() {
			return {
				nickname: "",
				headImg: "/static/images/missing-face.png",
				avatar: "",
				user: {},
				genders: [{
						value: '0',
						name: '未知'
					},
					{
						value: '1',
						name: '男'
					},
					{
						value: '2',
						name: '女'
					}
				],
			}
		},
		onLoad() {
			this.user = this.userInfo;
			if (this.userInfo.avatar_url) {
				this.headImg = this.userInfo.avatar_url
			}
		},
		methods: {
			oncancle() {
				this.show = false;
			},
			set() {
				uni.showLoading({
					title: "修改中..."
				});
				let postData = {};
				postData.nickname = this.user.nickname;
				if (this.avatar) {
					postData.avatar = this.avatar;
				}
				postData.qq = this.user.qq;
				postData.email = this.user.email;
				postData.gender = this.user.gender;
				this.$http.post('api/user/update-userinfo', postData).then((res) => {
					uni.hideLoading();
					this.updateUserInfo(res.member);
					this.user = res.member;
					this.$config.toast('修改成功');
				}).catch((error) => {
					uni.hideLoading();
					this.$config.toast(error.message);
				});
			},
			uploadImage() {
				// 从相册选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.handleUploadFile(res.tempFiles);
					}
				});
			},
			getInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: (infoRes) => {
						this.headImg = infoRes.userInfo.avatarUrl;
						this.avatar = infoRes.userInfo.avatarUrl;
					},
					fail: ()=> {
						this.$config.toast('获取失败，请手动上传');
					},
				});
			},
			handleUploadFile(data) {
				let filePath = data.path || data[0].path;
				const accessToken = this.userInfo.access_token || '';
				const postData = {};
				// #ifdef H5
				postData.platform = 'h5';
				postData.domain = window.location.host;
				// #endif
				// #ifdef MP-WEIXIN
				postData.platform = 'wechat';
				postData.appid = uni.getAccountInfoSync().miniProgram.appId;
				// #endif
				if (accessToken) {
					postData.access_token = accessToken;
				}
				this.$http.upload("api/file/images", {
						filePath: filePath,
						name: 'file'
				}).then(res => {
						this.headImg = res.url;
						this.avatar = res.url;
				});
			},
			handleGenderChange(e) {
				this.user.gender = e.detail.value;
			},
		},
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.np-user-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300upx;
		padding: 40upx 30upx 0;
		overflow: hidden;
		position: relative;
		font-size: 28rpx;
	}

	.np-portrait-box {
		clear: both;
		z-index: 2;
	}

	.np-portrait {
		position: relative;
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		border: 6upx solid #fff;
	}

	.np-nickname {
		margin-top: 30rpx;
		font-size: 32rpx;
	}

	.np-input-box {
		width: 560rpx;
		height: 88rpx;
		margin-top: 50rpx;
		background-color: rgb(238, 238, 238);
		padding-left: 30rpx;
		border-radius: 50rpx;
		box-shadow: 2rpx 2rpx 10rpx 0rpx #dfdee3;
	}

	.np-input-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 50rpx;
	}

	.np-tit {
		font-size: 32rpx;
		color: #333333;
		margin-right: 10rpx;
	}

	.np-gender-item {
		margin-right: 20upx;
	}

	.gender-item-radio::before {
		font-size: 24rpx !important;
	}

	.gender-item-text {
		padding: 0 10upx;
	}

	.np-btn {
		margin-top: 50rpx;
		height: 88rpx;
		width: 583rpx;
		border-radius: 50rpx;
		background-color: rgb(5, 187, 29);
		text-align: center;
		line-height: 88rpx;
		color: white;
		box-shadow: 0rpx 5rpx 10rpx #a2a2a2;
	}
</style>
